ラボ > Laravel、Lumen：基本、views関連

Laravel8 「Blade Components」ってヤツとview周り: ひとまずハローワールド

「Blade Components」ってヤツを使ってbodyタグと他を分けて「ハローワールド」を表示させてみる

作成日:2022-12-22, 更新日:2023-07-03

基本

▼私の環境
WIN+Docker+Ubuntuでlaravelを使うための作業メモ

やりたいコト

  • HTMLのヘッダ・フッタ、他の共通部を雛形としてどっかに置きたい

「Blade Components」を使う・使わない、どちらでも対応可能
→今回は「Blade Components」を使う方針でいく

ざっくりした手順

artisanコマンドを使うっぽい（※使わなくともいけそうな気はする）
→いろんなサイトを見ると使うのが基本っぽい。それにしてもいつもLaravelの公式ドキュメントが検索に出てこない…
→後で気づいたけど「https://readouble.com/」ってのが公式らしい。ドメインにLaravelってつかないんだね

▼手順

  1. artisanコマンドで「ClassベースComponents」ってヤツを作成
  2. ビューを修正

artisanコマンド

$ ./vendor/bin/sail php artisan make:component 〇〇〇

▼作られるファイル

  • app/View/Components/〇〇〇.php
  • resources/views/components/〇〇〇.blade.php

お試し作成とエラーと対応

▼ubuntuで「artisan」のあるとこまでカレントを移してから実行

$ ./vendor/bin/sail php artisan make:component HelloWorld

▼成功したら作成されるファイルたち

  • app/View/Components/HelloWorld.php
  • resources/views/components/hello-world.blade.php

▼ubuntuお決まりなのか知らないけどいつも通りの権限周りだったり…そんなエラー

file_put_contents(/var/www/html/app/View/Components/HelloWorld.php): Failed to open stream: No such file or directory

▼ちなみに予めフォルダや権限付与せずに「artisanコマンド実行・エラー対応」を繰り返すと言われるエラー

Component already exists.

→途中で作られたファイルを探して削除

▼何も考えずに「artisanコマンド実行」→「エラー対応」→「artisanコマンド実行」と続けると下記のような感じ…かなり面倒

  1. artisanコマンド実行
  2. 「app/View/Components」が無いとエラー
  3. 「app/View/Components」を作成
  4. artisanコマンド実行
  5. 「app/View/Components」にアクセス権限が無いとエラー
  6. 「app/View/Components」を777に変更
  7. artisanコマンド実行
  8. 「resources/views/components」が無いとエラー
  9. 「resources/views/components」を作成
  10. 「resources/views/components」を777に変更
  11. artisanコマンド実行
  12. 「Component already exists.」とエラー
  13. 「app/View/Components/HelloWorld.php」を削除
  14. artisanコマンド実行

ハローワールドを表示させるまで

構成はひとまずこんな感じ

  • HTMLのbodyタグ以外 - 雛形になる部分
  • HTMLのbodyタグの中身 - 各コンテンツ:ハローワールドを表示させる場所

→「Blade Components」で作成するのは「ハローワールド」じゃなく雛形のほう…

HTMLのbodyタグ以外 - 雛形になる部分

artisanコマンド実行（※コンポーネント作成）

後で使いまわすこと考えて「CommonLayout」にしておく

$ ./vendor/bin/sail php artisan make:component CommonLayout

▼作られたファイル

  • app/View/Components/CommonLayout.php
  • resources/views/components/common-layout.blade.php

雛形作成

▼resources/views/components/common-layout.blade.php

<html>
<title>テスト</title>
<body>
{{ $slot }}
</body>
</html>

→「<title>テスト</title>」はひとまず決め打ちにしておく
→「{{ $slot }}」が「ハローワールド」に置き換わる予定

HTMLのbodyタグの中身 - 各コンテンツ:ハローワールドを表示させる場所

artisanコマンド実行（※コントローラー作成）

$ ./vendor/bin/sail php artisan make:controller HelloWorldController

▼作られたファイル

  • app/Http/Controllers/HelloWorldController.php

コントローラーに記載

▼「app/Http/Controllers/HelloWorldController.php」に追加

public function index() {
    $viewData = array(
        'message' => 'ハローワールド',
    );
    return view('HelloWorld', $viewData);
}

→コレで「resources/views/HelloWorld.php」が呼び出されるハズ

ビューの作成

「resources/views/HelloWorld.php」の空ファイルを作成（※ビューの作成もartisanコマンドがあるのかな？）

▼「resources/views/HelloWorld.php」の中身

<x-common-layout>
{{ $message }}
</x-common-layout>

→「x-common-layout」が「resources/views/components/common-layout.blade.php」を使うってコトになる
→「{{ $message }}」はコントローラーでセットした「$viewData['message']」の出力

ルーティング設定

▼「routes/web.php」に追加

Route::get('/helloworld', [Controllers\HelloWorldController::class, 'index']);

ブラウザで確認

ブラウザで「http://localhost/helloworld」にアクセス
→「ハローワールド」が表示され、ページタイトルが「テスト」になっているはず

関連項目